<template>
	<view class="template-collect tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="a" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="tn-margin" style="padding-bottom: 120rpx;">
				<block v-for="(item,index) in plcontent">
					<!-- 图标logo/头像 -->
					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
						<view class="justify-content-item">
							<view class="tn-flex tn-flex-col-center tn-flex-row-left">
								<view class="logo-pic tn-shadow">
									<view class="logo-image">
										<view class="tn-shadow-blur"
											:style="'backgroundImage:url('+item.pltximg+');width: 60rpx;height: 60rpx;background-size: cover;'">
										</view>
									</view>
								</view>
								<view class="tn-padding-right tn-padding-left-sm">
									<view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">
										{{ item.plnc }}
									</view>
									<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
										style="padding-top: 5rpx;">
										{{ item.gxsj }}
									</view>
								</view>
							</view>
						</view>
						<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
							<view class="tn-text-center">
								<text class="tn-icon-like-lack tn-padding-xs"></text>
							</view>
							<!-- <view class="tn-text-center">
			        <text class="tn-text-xs">26</text>
			      </view> -->
						</view>
					</view>

					<view class="" style="margin: 20rpx 30rpx 30rpx 80rpx;">
						{{ item.pingluncontent }}
					</view>
					<view v-if="item.pinglunhuifu.length>0" class="tn-bg-gray--light tn-padding-sm"
						style="margin: 20rpx 30rpx 30rpx 80rpx;border-radius: 10rpx;">
						<text class="tn-text-bold tn-padding-right-xs">博主回复: </text>
						<text style="line-height: 40rpx;">{{ item.pinglunhuifu }}</text>
						<view class="tn-flex tn-flex-row-between tn-margin-top-xs">
							<view class="justify-content-item tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
								{{ item.gxsj }}
							</view>
							<!-- <view class="justify-content-item tn-text-xs tn-color-gray">
			        <text class="tn-padding-xs">16</text>
			        <text class="tn-icon-like-lack"></text>
			      </view> -->
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="tabbar footerfixed dd-glass">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin-top">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-right tn-padding-left-sm">
							<view class="avatar-all">
								<view class="tn-shadow-blur"
									style="background-image:url('https://resource.tuniaokj.com/images/blogger/onepiece-1.jpg');width: 60rpx;height: 60rpx;background-size: cover;">
								</view>
							</view>
						</view>
						<view
							class="topic__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="topic__info__item__input__left-icon">
								<view class="tn-icon-emoji-good"></view>
							</view>
							<view class="topic__info__item__input__content">
								<input @input="ssinput" v-model="plnrValue" maxlength="20"
									placeholder-class="input-placeholder" :cursor-spacing="18" placeholder="不说点啥子吗？" />
							</view>
						</view>
					</view>
				</view>
				<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-margin-right">
					<view class="topic__info__item__sure">
						<view @click="dtpinglun()" class="tn-flex-1 justify-content-item tn-text-center">
							<tn-button shape="round" backgroundColor="tn-cool-bg-color-15--reverse" width="100%" shadow>
								<text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
									发 送
								</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Tools from '@/tools/config.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateReMessage',
		mixins: [template_page_mixin],
		data() {
			return {
				plcontent: [],
				plnrValue: "",
				theiid:"",
			}
		},
		onLoad(options) {
			console.log(options)
			this.theiid = options.id
			this.initData()
		},
		methods: {
			ssinput(e) {
				this.plnrValue = e.target.value
			},
			dtpinglun() {
				let theplnr = this.plnrValue
				let theopenid = uni.getStorageSync('openid')
				let theunionid = uni.getStorageSync('unionid')
				uni.request({
					url: Tools.host + '/wshly.ashx',
					method: 'POST',
					data: {
						'lx': 'user_msg_pl_hf',
						'pinglunhuifu': theplnr,
						'openid': theopenid,
						'unionid': theunionid,
						'iid': this.theiid
					},
					success: (res) => {
						console.log('res：' + res.data.data)
						console.log('return_code：' + res.data.return_code)
						if (res.data.return_code == 1) {
							uni.showToast({
								icon: 'success',
								title: '评论成功'
							});
							this.plnrValue = ''
							this.initData()
						} else {
							uni.showToast({
								icon: 'success',
								title: '操作失败'
							});
						}

					},
					fail: (res) => {
						console.log('失败' + res)
						uni.showModal({
							title: '失败，请稍后重试',
							showCancel: false
						})
					}
				});
			},
			initData() {
				let theopenid = uni.getStorageSync('openid')
				let theunionid = uni.getStorageSync('unionid')
				uni.request({
					url: Tools.host + '/wshly.ashx',
					method: 'POST',
					data: {
						'lx': 'user_msg_pl_s',
						'openid': theopenid,
						'unionid': theunionid,
						'iid': this.theiid
					},
					success: (res) => {
						//成功
						// console.log(res)
						const a = JSON.parse(res.data.data)
						console.log(a)
						this.plcontent.push(a)
					},
					fail: (res) => {
						console.log('失败' + res)
						uni.showModal({
							title: '失败，请稍后重试',
							showCancel: false
						})
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		align-items: center;
		min-height: 130rpx;
		padding: 0;
		height: calc(130rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	/* 内容*/
	.topic {
		position: relative;
		height: 100%;
		z-index: 1;
		margin-bottom: 120rpx;


		/* 表单信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					width: 400rpx;
					height: 60rpx;
					border: 1rpx solid #C6D1D8;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						margin-right: 5rpx;
						color: #C6D1D8;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 30rpx;
							color: #78909C;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 34rpx;
						margin-right: 20rpx;
						color: #78909C;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					width: 100%;
					height: 60rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					// text-indent: 1em;
					border-radius: 100rpx;
					color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__sure {
					height: 60rpx;
					width: 140rpx;
				}

			}
		}

		/* 表单信息 end */

		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 30rpx;
		color: #C6D1D8;
	}
</style>